<template>
	<div
		class="formula-show"
		:class="noBorder && 'noBorder'">
		<span>{{ $t('common.form.type.formula') }}=</span>
		<span
			:class="[
				'formula-item',
				{ delete: item.isDelete }
			]"
			v-for="(item, index) in formula"
			:key="index"
		>{{ formatValue(item) }}</span>
	</div>
</template>

<script>
import { getSameField } from '@src/mform/util';
export default {
	props: {
		field: {
			type: Object
		},
		propFormula: {
			type: Array
		},
		noBorder: {
			type: Boolean,
			default: false
		},
		calculationFields: {
			type: Array,
		}
	},
	computed: {
		/* 计算公式 */
		formula() {
			if(this.propFormula) return this.propFormula
			let formula = this.field?.setting?.formula || [];
			if(!this.calculationFields) return formula

			// 判断计算公式的运算对象是否已删除或已隐藏，增加标识
			formula.map(item => {
				let field = getSameField(this.calculationFields, item.fieldName);
				item.isDelete = item.fieldName && (!field || !!field.isHidden);
			});
			return formula;
		},
	},
	methods: {
		formatValue(item) {
			const remark = {
				'product': this.$t('common.base.product'),
				'catalog': this.$t('common.base.productType'),
			}[item.tableName] || ''
			const value = item.valueLanguage[this.$i18n.locale] || item.value
			return value + (remark ? `(${remark})` : '')
		}
	}
}
</script>

<style lang="scss" scoped>
	.formula-show {
    line-height: 2;
    margin-top: 8px;

    color: $text-color-regular;
    font-size: $font-size-small;

		&:not(.noBorder) {
			padding: 6px 10px;
			border: 1px solid #e0e1e2;
			border-radius: $border-radius-base;
		}
    cursor: pointer;

    .formula-item {
      line-height: 1;
      display: inline-block;

      margin: 0 2px;
      padding: 2px 4px;
      background: $bg-color-l1;
      border-radius: 2px;

      &.delete {
        color: $color-danger;
        background-color: rgba(245, 108, 108, 0.2) !important;
      }
    }
  }
</style>